<template><ul class="menu-list">
    <li @click="toggle(key)" v-for="(val, key) in  menu" :class="{active: key === currentKey}" :key="key">{{val}}</li>
</ul></template>

<script>
    import bus from '../eventBus'
export default {
        data() {
    return {
        menu: ['女', '男', '移动', '年龄(升序)'],
        currentKey: -1
    }
},
    methods: {
        toggle(index) {
            this.currentKey = index;
            this.$bus.$emit('changeCurrentKey',index)
        }
    },
    created() {

    }
}
</script>
<style scoped>
    .menu-list{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50px;
        background-color: #555;
        font-size: 0;
        margin: 0;
        padding: 0;
        text-align: center;
        color: white;
    }
    .menu-list>li{
        display: inline-block;
        width: 25%;
        font-size: 15px;
        line-height: 50px;
    }
    .active{
        color: orangered;
    }
</style>